{% extends 'base_with_top_menu.html' %}

{% block title %}Book's details{% endblock %}

{% block header %}Book's details{% endblock %}

{% block content %}

	<script type="text/javascript">
	$(function() {
                {% autoescape off %}
                var availableTags =  [ {{all_authors}} ]
                {% endautoescape %}
        
		function split(val) {  return val.split(/,\s*/);  }
		function extractLast(term) {  return split(term).pop();  }
		
		$("#ac_authors").autocomplete({
	                delay: 10,
	                minLength: 0,
        
			source: function(request, response) { response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); },
			focus: function() { return false; },
			select: function(event, ui) {
				var terms = split( this.value );
				terms.pop();                     // remove the current input
				terms.push( ui.item.value );     // add the selected item
				terms.push("");                  // add placeholder to get the comma-and-space at the end
				this.value = terms.join(", ");
				return false;
			}
		});
	});
	</script>

<div class="book_one">
  <div class="inner_menu">
    <ul>
      <li><a href="{% url book_all %}">Show all books</a> </li>
      {%if is_updating%}<li><a href="{% url book_one book.id %}">Show this book</a></li>{% endif %}
    </ul>
  </div>
    
    {% if perms.baseapp.add_book %}
    <div class="form_bookWrapper">
        <!-- <h2 id="new_book">New book</h2> -->
        <form method="POST" action="." name="Fbook">
            {{ form.non_field_errors }}
            <table>
                {% for field in form %}
                    <tr>
                        <td>{{ field.label_tag }}:
                        <br />
                        {% if field.label == 'Author' %}
                            <textarea id="ac_authors" name="author" rows="5">{{ac_authors}}</textarea>
                        {% else %}
                            {{ field }}
                        {% endif %}
                        {{ field.errors }} </td>
                        <td>
                            <div class='book_actions'>
                                {% if field.label == 'Author' %}
                                    <a href='{% url author_add %}' class='add_author' target='_blank'>New author</a>
                            <a href='javascript:location.reload()' class='refresh'>Refresh</a>
                                {% endif %}
                                {% if field.label == 'Category' %}
                                    <a href='{% url category_add %}' class='add_category' target='_blank'>New category</a>
                            <a href='javascript:location.reload()' class='refresh'>Refresh</a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                <tr>
                    <td></td>
                    {% if is_adding %}  <td><input type="submit" name="btn_add"    value="Add book"></td>    {%endif%}
                    {% if is_updating %}<td><input type="submit" name="btn_update" value="Update book"></td> {%endif%}
                </tr>
            </table>
        </form>
        <script type="text/javascript"> 
            document.Fbook.title.focus();
        </script> 
    </div>
    {% endif %}

</div>    
{% endblock %}
